<template>
  <div class="shipOn">
    <div class="title">
      <span>装船清单</span>
      <span>船期：{{ivoyageName}}</span>
    </div>
    <onSearch @handleClick="handleClick"
              ref="onSearch"></onSearch>
    <el-table :data="tableData"
              @selection-change="handleSelectionChange"
              tooltip-effect="dark"
              style="width: 100%">
      <el-table-column type="selection"
                       width="55">
      </el-table-column>
      <el-table-column prop="billno"
                       label="提单号"
                       width="180">
      </el-table-column>
      <el-table-column prop="cntrno"
                       label="箱号"
                       width="180">
      </el-table-column>
      <el-table-column prop="cszCsizecd"
                       label="尺寸"
                       width="180">
      </el-table-column>
      <el-table-column prop="cstatus"
                       label="空重"
                       width="180">
      </el-table-column>
      <el-table-column prop="cweight"
                       label="箱货总重（吨）"
                       width="180">
      </el-table-column>
      <el-table-column prop="sealno"
                       label="铅封号"
                       width="180">
      </el-table-column>
      <el-table-column prop="potLdport"
                       label="装货港"
                       width="180">
      </el-table-column>
      <el-table-column prop="potUnldport"
                       label="卸货港"
                       width="180">
      </el-table-column>
      <el-table-column prop="potDstnport"
                       label="目的港"
                       width="180">
      </el-table-column>
      <el-table-column prop="gname"
                       label="货名"
                       width="180">
      </el-table-column>
      <el-table-column prop="gcentpks"
                       label="件数"
                       width="180">
      </el-table-column>
      <el-table-column prop="gcentvol"
                       label="体积（立方米）"
                       width="180">
      </el-table-column>
      <el-table-column prop="cstCopercd"
                       label="持箱人"
                       width="180">
      </el-table-column>
      <el-table-column prop="internalfg"
                       label="内外贸"
                       width="180">
      </el-table-column>
      <el-table-column prop="brkdmgcd"
                       label="残损"
                       width="180">
      </el-table-column>
      <el-table-column prop="settmpt"
                       label="冷藏温度"
                       width="180">
      </el-table-column>
      <el-table-column prop="dtpDnggcd"
                       label="危险等级"
                       width="180">
      </el-table-column>
      <el-table-column prop="unno"
                       label="联合国编码"
                       width="180">
      </el-table-column>
      <el-table-column prop="consignee"
                       label="货主"
                       width="180">
      </el-table-column>
      <el-table-column prop="deliverymd"
                       label="条款"
                       width="180">
      </el-table-column>
      <el-table-column prop="chargeCstmcd"
                       label="缴费单位"
                       width="180">
      </el-table-column>
      <el-table-column fixed="right"
                       label="操作"
                       width="100">
        <template slot-scope="scope">
          <el-button @click="edit(scope.row)"
                     type="text"
                     style="color: #1955CF">编辑</el-button>
          <el-button type="text"
                     style="color:  #eb2a2a"
                     @click="del(scope.$index)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="page">
      <el-pagination background
                     :total="condition.total"
                     :page-size="condition.size"
                     :current-page.sync="condition.current"
                     @current-change="currentChange"
                     layout="prev, pager, next">
      </el-pagination>
    </div>
    <el-dialog title="新增"
               width="700px"
               :visible.sync="dialogVisible">
      <addOn :id="id"
             type='E'
             ref="addOn"
             v-if="dialogVisible"
             @success="addSuccess"
             @cancel="cancel"></addOn>
    </el-dialog>
  </div>
</template>

<script>
import onSearch from '../components/onSearch.vue'
import addOn from '../components/addOn.vue'
export default {
  name: 'shipOn',
  components: { onSearch, addOn },
  data() {
    return {
      tableData: [],
      dialogVisible: false,
      condition: {
        scdId: '',
        voyType: 'E',
        billno: '',
        cntrno: '',
        size: 10000,
        current: 1,
        total: 0,
      },
      id: '',
      ivoyageName:'',
      multipleSelection: [],
    }
  },

  methods: {
    handleClick(v) {
      switch (v) {
        //查询
        case 1:
          this.condition = {
            ...this.condition,
            ...this.$refs.onSearch.formInline,
          }
          this.loadAndUploadFind()
          return
        //重置
        case 2:
          this.$refs.onSearch.formInline = { cntrno: '', billno: '' }
          this.condition = {
            ...this.condition,
            ...this.$refs.onSearch.formInline,
          }
          this.loadAndUploadFind()
          return
        //下发
        case 3:
          this.loadAndUploadSubmit()
          return
        //新增
        case 4:
          this.openDialog()
          return
        //批量删除
        case 5:
          this.dels()
          return
        default:
          return
      }
    },
    openDialog() {
      this.dialogVisible = true
    },
    addSuccess(v) {
      console.log(v)
      this.dialogVisible = false
      const index = this.tableData.findIndex((item) => item.plcId == v.plcId)
      if (index != -1) {
        this.tableData.splice(index, 1, v)
      } else {
        this.tableData.push(v)
      }
    },
    cancel() {
      this.dialogVisible = false
    },
    loadAndUploadFind() {
      this.$api.loadAndUploadFind(this.condition).then((res) => {
        this.tableData = res.data
      })
    },
    loadAndUploadSubmit() {
      let params = {
        boxes: this.tableData,
        opType: 'create',
        scdId: this.id, //航次id
        voyType: 'E',
      }
      this.$api
        .loadAndUploadSubmit(params)
        .then((res) => {
          if (res.message == 'success') {
            this.$message.success('下发成功')
            this.loadAndUploadFind()
          } else {
            this.$message.error(res.message)
          }
        })
        .catch((err) => {})
    },
    currentChange(e) {
      this.condition.current = e
      this.loadAndUploadFind()
    },
    edit(row) {
      this.dialogVisible = true
      this.$nextTick(() => {
        this.$refs.addOn.loadAndUploadFindOne(row.plcId)
      })
    },
    del(index) {
      this.tableData.splice(index, 1)
    },
    dels() {
      if (this.multipleSelection.length == 0) {
        this.$message.warning('请选择数据')
        return
      }
      this.tableData = this.tableData.filter(
        (item) => !this.multipleSelection.includes(item)
      )
    },
    handleSelectionChange(v) {
      this.multipleSelection = v
    },
  },

  computed: {},

  mounted() {
    this.id = this.$route.query.id
    this.ivoyageName = this.$route.query.ivoyageName
    this.condition.scdId = this.$route.query.id
    this.loadAndUploadFind()
  },
}
</script>
<style lang='scss' scoped>
.shipOn {
  background-color: #fff;
  padding-bottom: 20px;
}
.title {
  border-bottom: 1px solid #eee;
  display: flex;
  align-items: center;
  padding: 13px 15px;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #333333;
  span:first-child {
    margin-right: 20px;
  }
  span:last-child {
    color: #666;
    font-size: 14px;
    font-weight: normal;
  }
}
.page {
  text-align: right;
  margin-top: 20px;
}
:deep.el-dialog__body {
  padding-top: 0;
}
</style>